<!--
 * @Author: qwlbwm 18370818801qwl./
 * @Date: 2023-09-06 15:57:43
 * @LastEditors: qwlbwm 18370818801qwl./
 * @LastEditTime: 2023-09-23 17:58:12
 * @FilePath: \checc-business-module-web-kgpt-dev\src\views\examineManage\technologyExamine\zjExamine\annualExamineLibrary\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 该标准库用于中交和中咨共用,参数type会有所区别 -->
  <div class="container">
    <el-row class="" style="margin-bottom: 20px">
      <el-col :span="12" align="left">
        <el-input
          v-model="searchFrom.name"
          placeholder="名称"
          style="width: 150px; margin-right: 15px"
          @change="search"
          clearable
        />
        <el-button class="ordinary" @click="search()">搜索</el-button>
      </el-col>
      <el-col :span="12" align="right">
        <el-button class="ordinary" @click="getExportBtn()" v-limit="'KHGL:KJKH:ZZKJKH:ZZNDKHZB:EXPORT'">批量导出</el-button>
        <el-button type="danger" @click="handleDetect()" v-limit="'KHGL:KJKH:ZZKJKH:ZZNDKHZB:DELETE'">删除</el-button>
        <el-button type="warning" @click="lockBtn(true)" v-limit="'KHGL:KJKH:ZZKJKH:ZZNDKHZB:LOCK'">锁定</el-button>
        <el-button type="primary" @click="lockBtn(false)" v-limit="'KHGL:KJKH:ZZKJKH:ZZNDKHZB:UNLOCK'">解锁</el-button>
        <el-button type="success" @click="createPlan()" v-limit="'KHGL:KJKH:ZZKJKH:ZZNDKHZB:CREATEPLAN'">生成计划</el-button>
        <el-button type="primary" @click="handleAdd()" v-limit="'KHGL:KJKH:ZZKJKH:ZZNDKHZB:ADD'">新建</el-button>
      </el-col>
    </el-row>
    <div>
      <el-table
        :data="state.table_list"
        style="width: 100%"
        v-loading="state.table_loading"
        @selection-change="selectionChange"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column
          type="selection"
          align="center"
          width="55"
          :reserve-selection="false"
        />
        <el-table-column type="index" :index="indexMethod" align="center" label="序号" width="60" />
        <el-table-column prop="name" align="center" label="考核名称" width="150" />
        <el-table-column prop="age" align="center" label="年度" />
        <el-table-column prop="indexCounts" align="center" label="指标数量" />
        <el-table-column prop="remark" align="center" label="备注" />
        <el-table-column prop="modifyUsername" align="center" label="操作人" />
        <el-table-column prop="modifyTime" align="center" label="更新时间" />
        <el-table-column prop="status_text" align="center" label="状态" width="80">
          <template #default="scope">
            <span :class="['exStatusClass' + scope.row.lockFlag]">{{
              scope.row.lockFlag_text
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="150">
          <template #default="scope">
            <el-button class="ordinary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
              type="primary"

              v-if="scope.row.lockFlag == 0"
              @click="goIndex(scope.row)"
              >管理</el-button
            >
            <el-button
              type="primary"

              v-if="scope.row.lockFlag == 1"
              @click="goIndex(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px"
        :total="pageOption.total"
        :page-size="pageOption.size"
        :current-page="pageOption.current"
        @current-change="currentChange"
        layout="total, prev, pager, next, jumper"
        align="right"
      ></el-pagination>
    </div>
    <addAndEdit
      v-model:visible="state.modalVisible"
      :opType="state.opType"
      :standardType="standardType"
      @refresh="gettargetlist"
      :editForm="state.handleRowData"
    ></addAndEdit>
    <el-dialog
      v-model="state.createPlanVisible"
      title="请选择生成计划的子公司"
      width="500px"
      :close-on-click-modal="false"
      class="dialog_"
      @close="close1"

    >

    <el-input placeholder="请输入关键字搜索" style="margin-bottom: 10px;" v-model="state.searchIpt" @input="changeIpt(state.searchIpt)"></el-input>
      <el-table
        :data="state.company_list"
        style="width: 100%;"
        @selection-change="companySelection"
        class="table_"
      >
        <el-table-column type="selection" width="80" />
        <el-table-column prop="companyName" label="公司名称" />
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.createPlanVisible = false">取消</el-button>
<!--          <el-button type="primary" :loading="state.btnloading" @click="confirmCreatePlan"
            >确认</el-button>-->
          <el-button type="primary"  @click="confirmCreatePlan"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
// import Table from '../../../components/indexTable.vue'
import pubFc from "@/views/examineManage/utils";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import { useRouter } from "vue-router";
import * as api from "../../../api/examineManage";
import addAndEdit from "../../zjExamine/annualExamineLibrary/addAndEdit.vue";
const searchFrom = reactive({
  //查询
  name: "",
});
const router = useRouter();
let standardType = ref("2"); //该参数决定显示的是中交还是中咨的
const pageOption = reactive({
  total: 0,
  current: 1,
  size: 10,
});
let state = reactive<any>({
  table_list: [],
  modalVisible: false,
  opType: "add",
  handleRowData: null,
  createPlanVisible: false,
  company_list: [
    {
      name: "养老公司",
    },
  ],
  table_loading: false,
  btnloading: false,
  searchIpt:'',//单位搜索文字
});

let selectedRows = ref<any>([]);
const search = () => {
  //搜索
  pageOption.current = 1;
  gettargetlist();
};

const lockBtn = (flag: boolean) => {
  //锁定或解锁flag为true调用锁定接口
  if (confirmSelected()) {
    let apiName = flag ? "lockAnnualExamineRequest" : "unlockAnnualExamineRequest";
    api[apiName]({
      id: selectedRows.value[0].id,
    }).then((res) => {
      if ((res.data as any).success) {
        ElMessage({
          message: flag ? "已锁定" : "已解锁",
          type: "success",
        });
        gettargetlist();
      }
    });
  }
};
const createPlan = () => {
  //生成计划
  if (confirmSelected()) {
    let selected = selectedRows.value[0];
    if (selected.lockFlag == 0) {
      ElMessage({
        message: "请选择锁定数据",
        type: "warning",
      });
    } else {
      state.selectedCompany = [];
      api.getCompanyListRequest({}).then((res) => {
        state.company_list = res.data.data;
      });
      // state.selectedCompany=res.data.data;
      state.createPlanVisible = true;
    }
  }
};
//搜索单位
const changeIpt = (val) =>{
  api.getCompanyListRequest({}).then(res =>{
    state.company_list  = res.data.data.filter(e =>{
        return e.companyName.includes(val)
      })

    })
}
const confirmCreatePlan = () => {
  //确认生成计划
  if (!state.selectedCompany.length) {
    ElMessage.warning("请选择子公司");
    return;
  }
  const loading = ElLoading.service({
    lock: true,
    text: '正在生成计划',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  // state.btnloading = true;
  let companyIds = state.selectedCompany.map((item) => {
    return item.id;
  });
  api
    .createPlanRequest({
      myExamineId: selectedRows.value[0].id,
      companyIds: companyIds,
    })
    .then((res) => {
      console.log(1111,res)
      state.btnloading = false;
      state.createPlanVisible = false;
      if (res.data.code == 200) {
        state.createPlanVisible = false;
        loading.close();
        ElMessage.success("生成计划成功");
        gettargetlist();
        return;
      }

    }).finally(() => {
    loading.close();
    state.createPlanVisible = false;
  });
};
const confirmSelected = () => {
  if (selectedRows.value.length !== 1) {
    ElMessage({
      message: "请选择一条数据！",
      type: "warning",
    });
    return false;
  } else {
    return true;
  }
};
const getExportBtn = () => {
  ElMessageBox.confirm("确定要导出吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
  //批量导出
  api
    .exportZzAnnulRequest({
      current: pageOption.current,
      size: pageOption.size,
      ...searchFrom,
    })
    .then((res) => {
      const { data, headers } = res;
      pubFc.downloadFunc(data, headers);
    });
  });
};
const indexMethod = (index)=>{
  return pageOption.size*(pageOption.current-1) +index+1
}
const selectionChange = (arr) => {
  //选中、
  selectedRows.value = arr;
};
const close1 = () =>{
  state.searchIpt = ''
}
const companySelection = (arr) => {
  state.selectedCompany = arr;
};
const handleDetect = () => {
  //批量删除

  if (selectedRows.value.length === 0) {
    ElMessage({
      message: "请选择数据后删除！",
      type: "warning",
    });
  } else if (selectedRows.value.length > 1) {
    ElMessage({
      message: "请选择一条数据！",
      type: "warning",
    });
  } else {
    ElMessageBox.confirm("确定要删除选中数据吗?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      // let sel_ids=selectedRows.value.map(item=>{return item.id});
      api
        .delAnnualExRequest({
          id: selectedRows.value[0].id,
        })
        .then((res) => {
          if (res.data.code == 200) ElMessage.success("删除成功");
          gettargetlist();
        });
    });
  }
};
const handleAdd = () => {
  //新增
  state.opType = "add";
  state.modalVisible = true;
};
const handleEdit = (item) => {
  //编辑
  state.opType = "edit";
  state.handleRowData = item;
  state.modalVisible = true;
};
const goIndex = (row) => {
  //跳转到指标列表
  router.push({
    path: "/examineManage/techExamine/zzExamine/zzAnnualist",
    query: {
      aid: row.id,
      name: row.name,
    },
  });
};
const currentChange = (page) => {
  //翻页
  pageOption.current = page;
  gettargetlist();
};
const gettargetlist = () => {
  //获取标准指标库列表
  state.table_loading = true;
  api
    .zzAnnualpagelistRequest({
      ...searchFrom,
      current: pageOption.current,
      size: pageOption.size,
    })
    .then((res) => {
      state.table_list = res.data.data.records;
      pageOption.total = res.data.data.total;
      state.table_loading = false;
    });
};
gettargetlist();
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
  overflow-y: auto;
}

// :deep(.el-dialog__body) {
//   padding: 0 !important
// }
:deep(.el-dialog__body) {
  padding: 0;
}

.dialogCloseBtn {
  position: absolute;
  top: 20px;
  right: 20px;
}

// .el-col {
//   line-height: 60px;
// }

.pageName {
  font-weight: 700;
}

.el-form-item {
  .el-input {
    width: 100px;
  }

  .el-select {
    width: 100px;
  }
}

:deep(.demo-tabs > .el-tabs__content) {
  max-height: 500px;
  overflow-y: scroll;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

:deep(.demo-tabs > .el-tabs__content::-webkit-scrollbar) {
  display: none;
  /* Chrome Safari */
}
.exStatusClass1 {
  color: #409eff;
}
.exStatusClass2 {
  color: #fff240;
}
.exStatusClass3 {
  color: #f83411;
}
.table_{
  height: 500px;
  overflow-y: auto;
  overflow-x: auto;
}
</style>
